import React, { useState, useRef, useEffect } from "react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { DictTypeAPI, DictDataAPI } from "@/api/dictionary";

export default function ProjectFilters({ filters, onFilterChange }) {
  const [voltageLevels, setVoltageLevels] = useState([]);
  const [isLoadingVoltage, setIsLoadingVoltage] = useState(true);

  // 加载电压等级数据（优化容错处理）
  useEffect(() => {
    const loadVoltageLevels = async () => {
      // 初始化状态为加载中
      setIsLoadingVoltage(true);
      const defaultLevels = [];
      try {
        // 1. 获取所有字典类型（增加响应结构安全性判断）
        const typeResponse = await DictTypeAPI.getList().catch((err) => {
          console.warn("调用DictTypeAPI失败:", err);
          return null; // 捕获接口调用错误，避免中断
        });

        // 检查响应是否有效
        if (
          !typeResponse ||
          typeResponse.code !== 200 ||
          !Array.isArray(typeResponse.rows)
        ) {
          console.warn("字典类型数据无效，使用默认电压等级");
          setVoltageLevels(defaultLevels);
          return;
        }

        // 2. 查找电压等级字典类型（增加容错处理）
        const voltageType = typeResponse.rows.find(
          (item) => item?.dictName === "电压等级" // 安全访问属性
        );

        if (!voltageType || !voltageType.dictType) {
          console.warn("未找到有效电压等级dictType，使用默认值");
          setVoltageLevels(defaultLevels);
          return;
        }

        // 3. 获取具体电压等级数据
        const dataResponse = await DictDataAPI.getList({
          dictType: voltageType.dictType,
        }).catch((err) => {
          console.warn("调用DictDataAPI失败:", err);
          return null;
        });

        // 检查数据响应是否有效
        if (
          !dataResponse ||
          dataResponse.code !== 200 ||
          !Array.isArray(dataResponse.rows)
        ) {
          console.warn("电压等级数据无效，使用默认值");
          setVoltageLevels(defaultLevels);
          return;
        }

        // 4. 格式化并排序数据（增加空值处理）
        const formattedLevels = dataResponse.rows
          .filter((item) => item?.dictValue && item?.dictLabel) // 过滤无效条目
          .sort((a, b) => (a?.dictSort || 0) - (b?.dictSort || 0))
          .map((item) => ({
            value: item.dictValue,
            label: item.dictLabel,
          }));

        // 如果过滤后无数据，使用默认值
        setVoltageLevels(
          formattedLevels.length > 0 ? formattedLevels : defaultLevels
        );
      } catch (error) {
        // 捕获所有未预料到的错误，但不抛出，仅日志记录
        console.warn("加载电压等级过程中发生意外:", error);
        setVoltageLevels(defaultLevels);
      } finally {
        // 无论成功失败，都结束加载状态
        setIsLoadingVoltage(false);
      }
    };

    loadVoltageLevels();
  }, []);

  const handleFilterChange = (type, value) => {
    // 确保回调函数存在再执行
    if (typeof onFilterChange === "function") {
      onFilterChange({
        ...filters,
        [type]: value,
      });
    }
  };

  return (
    <div className="flex flex-col md:flex-row gap-4 items-center flex-wrap">
      <Input
        placeholder="搜索相关单位..."
        value={filters?.unit || ""} // 安全访问filters属性
        onChange={(e) => handleFilterChange("unit", e.target.value)}
        className="w-full md:w-48"
      />

      <Select
        value={filters?.projectStatus || "all"}
        onValueChange={(value) => handleFilterChange("projectStatus", value)}
      >
        <SelectTrigger className="w-full md:w-36">
          <SelectValue placeholder="项目状态" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">全部状态</SelectItem>
          <SelectItem value="notStarted">未开工</SelectItem>
          <SelectItem value="inProgress">已开工</SelectItem>
          <SelectItem value="completed">已完工</SelectItem>
        </SelectContent>
      </Select>

      <Select
        value={filters?.voltageLevel || "all"}
        onValueChange={(value) => handleFilterChange("voltageLevel", value)}
        disabled={isLoadingVoltage} // 加载中禁用选择器
      >
        <SelectTrigger className="w-full md:w-36">
          <SelectValue placeholder="电压等级" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">全部等级</SelectItem>
          {isLoadingVoltage ? (
            <SelectItem value="null" disabled>
              加载中...
            </SelectItem>
          ) : (
            voltageLevels.map((level) => (
              <SelectItem key={level.value} value={level.value}>
                {level.label}
              </SelectItem>
            ))
          )}
        </SelectContent>
      </Select>
    </div>
  );
}
